#include ("/_includes/_layout.html")
#@layout("应用列表", "wxmall,点步科技", "Wxmall社区","wxmall")
<style>
.iipxjf{
	border-radius: 4px;
	border: 1px solid #e7eaec;
	overflow: hidden;
}
.jsONNa{
	float:left;
	text-align: center;
}
.dgMvjz,.jtiAZd{
	font-size: 10px;
}
.bjmPCA {
    font-size: 14px;
    color: #313131;
    margin: 10px 0;
}
.dzlqyF {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #03a854;
}

.iIjmuk-box{
    border-radius: 4px;
	float: left;
	padding:0px 15px 15px;
	
}
.iIjmuk {
    position: relative;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 4px;
}
.jIeewA{
	padding: 16px;
	border: 1px solid #e7eaec;
	padding: 10px;
	overflow: hidden;
	background-color: #fbfcfd
}

.eCNVCe {
    overflow: hidden;
    position: relative;
}
.gRCHRu {
    width: 100%;
    height: 100%;
    margin-right: 5px;
}
.cvtaBP {
    font-size: 15px;
    position: relative;
    left:10px;
    margin: 0px;
}
.cvtaDESC{
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
	position: relative;
    left:10px;
    color: #979899;
    width: 60%;
    margin: 0px;
}
.explain-box{
	padding-top: 15px;
	padding-bottom: 15px;
}
.deadline-box{
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 15px;
}
.irthqT{
	font-size: 14px;
    color: #3e3e3e;
    margin-top: 17px;
    margin-bottom: 13px;
}
.kNaOOG {
    border-radius: 33px;
    background-color: #f5f5f5;
    display: inline-block;
    padding:6px 20px;
    margin: 20px auto 0px;
    color: #565656;
}
.kNaOOG .font-bold{
	padding: 20px 20px;
}
</style>
#define content()
<div class="wrapper wrapper-content">
	<div class="ibox float-e-margins">
		<div class="ibox-content" style="padding: 0px;">
			<div class="col-md-12" style="padding: 20px 50px 100px 50px">
				<div class="col-sm-12 col-md-12" style="padding-bottom: 20px;">
					<a href="#(webctx)/app/add" id="add-activity" class="btn btn-success">新建应用</a>
				</div>
				<div class="col-sm-12 col-md-12" style="padding-bottom: 20px;"
					id="commend">
					<div class="col-sm-12 col-md-12"
						style="background-color: #f5f5f5; color: #333; border-color: #d1dade; height: 35px; line-height: 35px; font-size: 18px;">通用插件</div>
				</div>
				<div class="col-sm-12 col-md-12" style="padding-bottom: 20px;"
					id="redpack">
					<div class="col-sm-12 col-md-12"
						style="background-color: #f5f5f5; color: #333; border-color: #d1dade; height: 35px; line-height: 35px; font-size: 18px;">红包插件</div>
				</div>
				<div class="col-sm-12 col-md-12" style="padding-bottom: 20px;"
					id="fans">
					<div class="col-sm-12 col-md-12"
						style="background-color: #f5f5f5; color: #333; border-color: #d1dade; height: 35px; line-height: 35px; font-size: 18px;">吸粉插件</div>
				</div>
				<div class="col-sm-12 col-md-12" style="padding-bottom: 20px;"
					id="marketing">
					<div class="col-sm-12 col-md-12"
						style="background-color: #f5f5f5; color: #333; border-color: #d1dade; height: 35px; line-height: 35px; font-size: 18px;">营销插件</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script id="tmp" type="text/html">
<div class="iIjmuk-box col-md-3">
	<div class="iIjmuk">
		<a href="javascript:void(0);" data-url="{appIndexPage}" data-id="{id}" app-menu-id="{appMenuId}" app-sec-menu-id="{appSecMenuId}">
			<div class="jIeewA">
				<div style="width:49px; height:49px; display:inline-block; float: left"><img alt="image" class="gRCHRu" src="{appImage}"></div>
				<p class="sc-gVyKpa cvtaBP">{appName}</p>
				<a href="{url}" style="color: grey;position: relative;left:10px;margin: 0px;font-size:14px;top: 12px;">编 辑</p>
			</div>
		</a>
	</div>
</div>
</script>
<script type="text/template" id="table_noresult_tr_tpl">
	<tr class="package"><td colspan="5" class="center">没有结果集</td></tr>
</script>
#end
<script type="text/javascript">
$(function(){
	getApps();
});
function getApps(){
	obz.ajaxJson("#(webctx)/app/getApps", {}, function(resp){
		if(resp.code == 200){
			var list = resp.data;
			
			for(var i=0;i<list.length;i++){
				var app = list[i];
				app.appImage = "#(webctx)"+"/"+app.appImage;
				app.url = "#(webctx)"+"/app/add?id="+app.id;
				if(!app.isfree){
					app.isfree = "flag";
				}
				if(app.appCategory == 0){
					var html = formatTemplate(app, $("#tmp").html());
					$("#commend").after(html);
				}else if(app.appCategory == 1){
					var html = formatTemplate(app, $("#tmp").html());
					$("#redpack").after(html);
				}else if(app.appCategory == 2){
					var html = formatTemplate(app, $("#tmp").html());
					$("#fans").after(html);
				}else if(app.appCategory == 3){
					var html = formatTemplate(app, $("#tmp").html());
					$("#marketing").after(html);
				}
			}
		}
	});
}
function formatTemplate(dta, tmpl) {  
    var format = {  
        name: function(x) {  
            return x  
        }  
    };  
    return tmpl.replace(/{(\w+)}/g, function(m1, m2) {  
        if (!m2)  
            return "";  
        return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];  
    });  
}
Template.init("#menu-app");
</script>